<script setup lang="ts">
/**
 * @description 首页中`关于我们`卡片的 Item。
 *
 * @property index - index
 * @property icon - 图标
 * @property title - 标题
 * @property subtitle - 副标题
 * @property hasMargin - 是否显示 margin
 */
interface AboutUsItemProps {
  index: number
  icon: string
  title: string
  subtitle: string
  hasMargin: boolean
}

const props = withDefaults(defineProps<AboutUsItemProps>(), {
  hasMargin: false,
})
</script>

<template>
  <view class="flex flex-col items-center" :style="{ marginBottom: props.hasMargin ? '54rpx' : 0 }">
    <image class="w-56rpx h-56rpx" :src="icon" />
    <Spacer height="16" />
    <view class="text-32rpx leading-32rpx text-primary font-bold">
      {{ props.title }}
    </view>
    <Spacer height="12" />
    <view class="text-26rpx leading-26rpx text-tertiary overflow-visible">
      {{ props.subtitle }}
    </view>
  </view>
</template>
